<template>
  <div>
    <Header></Header>
    <!--Begin Register Begin-->
    <div class="log_bg">
      <div class="top">
        <div class="logo"><a href="Index.html"><img src="/static/images/logo.png" /></a></div>
      </div>
      <div class="regist">
        <div class="log_img"><img src="/static/images/l_img.png" width="611" height="425" /></div>
        <div class="reg_c">
          <form>
            <table border="0" style="width:420px; font-size:14px; margin-top:20px;" cellspacing="0" cellpadding="0">
              <tr height="50" valign="top">
                <td width="95">&nbsp;</td>
                <td>
                  <span class="fl" style="font-size:24px;">注册</span>
                  <span class="fr">已有商城账号，<a href="Login.html" style="color:#ff4e00;">我要登录</a></span>
                </td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;用户名 &nbsp;</td>
                <td><input type="text" value="" v-model="userInfo.userName" class="l_user" /></td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;密码 &nbsp;</td>
                <td><input type="password" v-model="userInfo.userPwd" value="" class="l_pwd" /></td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;确认密码 &nbsp;</td>
                <td><input type="password" v-model="userInfo.checkPwd" value="" class="l_pwd" /></td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;性别 &nbsp;</td>
                <td>
                  <el-radio v-model="userInfo.sex" :label="1">男</el-radio>
                  <el-radio v-model="userInfo.sex" :label="0">女</el-radio>
                </td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;邮箱 &nbsp;</td>
                <td><input type="text" value="" v-model="userInfo.userEmail" class="l_email" /></td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;手机 &nbsp;</td>
                <td><input type="text" value=""  v-model="userInfo.userPhone" class="l_tel" /></td>
              </tr>
              <tr height="50">
                <td align="right"><font color="#ff4e00">*</font>&nbsp;生日 &nbsp;</td>
                <td><input type="date" value="" v-model="userInfo.userBirthday" class="l_user" /></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td style="font-size:12px; padding-top:20px;">
                 <span style="font-family:'宋体';" class="fl">
                     <label class="r_rad"><input type="checkbox" v-model="selected" /></label><label class="r_txt">我已阅读并接受《用户协议》</label>
                    </span>
                </td>
              </tr>
              <tr height="60">
                <td>&nbsp;</td>
                <td><input type="button" @click="register" value="立即注册" class="log_btn" /></td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
    <!--End Register End-->
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from "../common/Header";
  import Footer from "../common/Footer";
  import {test01,num} from "../../../assets/test";

  export default {
    name: "Register",
    components:{
      Header,
      Footer
    },
    data(){
      return{
          userInfo:{
              userName:"rock",
              userPwd:"123456",
              checkPwd:"123456",
              sex:1,
              userEmail:"7679998@qq.com",
              userPhone:"15008677447",
              userBirthday:"1998-09-02",
              roleId:1
          },
          selected:false//阅读协议是否选中
      }
    },
    methods:{
        register(){// 用户注册
           const self = this;
           if(this.selected==false){
              this.$alert("请阅读协议");
              return;
           }
           //1 发送ajax请求
           const  http = this.$http.post("/server-register/userInfo/user",this.userInfo);
           //2 定义请求回调函数
           http.then(function (rs) {
             console.log(rs.data);
              if(rs.data.code==200){
                 //
                 self.$alert("进入首页");
              }
          })
        }
    }

  }
</script>

<style scoped>

</style>
